<template>
  <div class="menus">
    <div v-for="menuone in menuList" :style="menuone.style" :class="menuone.class" @click="selectMenu(menuone)">
      <img :src="menuone.img">
      <p>{{menuone.text}}</p>
    </div>
  </div>
</template>

<script>
  import encry from "./../utils/encrypt"
  import CryptoJS from "crypto-js"

  export default {
    name: 'mainmenu',
    data() {
      return {
        menuList: [{
          img: require('../../static/imgs/dingdan.png'),
          text: '我的订单',
          style: {background: "#51a051"},
          class: ["menu", "bounceInDown", "animated"]
        },
          {
            img: require('../../static/imgs/kaihu.png'),
            text: '对公开户',
            style: {background: "#b09460"},
            class: ["menu", "bounceInLeft", "animated"]
          },
          {
            img: require('../../static/imgs/biangeng.png'),
            text: '对公信息变更',
            style: {background: "#49a688"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/huikuan.png'),
            text: '个人外汇汇出汇款',
            style: {background: "rgb(70, 175, 184)"},
            class: ["menu", "bounceInUp", "animated"]
          },
          {
            img: require('../../static/imgs/kaihu.png'),
            text: '外汇开户',
            style: {background: "#5c5ea4"},
            class: ["menu", "bounceInLeft", "animated"]
          },
          {
            img: require('../../static/imgs/zhengming.png'),
            text: '零售资信证明',
            style: {background: "#5b008094"},
            class: ["menu", "bounceInDown", "animated"]
          },
          {
            img: require('../../static/imgs/zhuxiao.png'),
            text: '对公销户',
            style: {background: "#800035b3"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/quxian.png'),
            text: '大额取现',
            style: {background: "rgb(188, 137, 20)"},
            class: ["menu", "bounceInUp", "animated"]
          },
          {
            img: require('../../static/imgs/quxian2.png'),
            text: '外汇取现',
            style: {background: "#89a84c"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/fuwu.png'),
            text: '上门服务',
            style: {background: "#20728b"},
            class: ["menu", "bounceInDown", "animated"]
          },
          {
            img: require('../../static/imgs/jia.png'),
            text: '敬请期待',
            style: {background: "rgb(143, 159, 164)"},
            class: ["menu", "bounceInLeft", "animated"]
          }],
      }
    },
    methods:{
      selectMenu(menuone){
        if(menuone.text=="对公信息变更"){
          this.$router.push({path:"/agent",query:{}})
        }else if(menuone.text=="对公开户"){
          this.$router.push({path:"/preApplication",query:{}})
        }else if(menuone.text=="大额取现"){
          this.$router.push({path:"/largeCash",query:{}})
        }
      }
    },
    mounted() {
      let that = this;
      let k = encry.getRandomKey(16);
      let iv = "";
      let req = {};
      let reqData = {};

      reqData.format = "yyyy-MM-dd hh-mm-ss";
      reqData.appAccessToken = that.$getStore("appAccessToken");

      let dataEnc = encry.encrypt(JSON.stringify(reqData), k, iv);
      let keyEnc = encry.getRsa(CryptoJS.enc.Utf8.stringify(k));

      req.reqData = dataEnc;
      req.key = keyEnc;
      req.appID = that.$getStore("appID");
      req.appAccessToken = that.$getStore("appAccessToken");

      that.$http.post(that.myStore.BaseUrl + "/sdk/ESB/SDKGetTime", JSON.stringify(req))
        .then(function (res) {
          //成功返回
        })
        .catch(function (error) {
          //失败返回
        })

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .menus {
    width: 96%;
    margin: 0 auto;
  }

  .menu {
    width: calc(100% / 3);
    float: left;
    height: 120px;
    padding: 20px 0;
    border: 2px solid white;
    border-radius: 5px;
    > img {
      width: 40%;
    }
    > p {
      width: 100%;
      color: white;
      font-size: 13px;
    }
  }
</style>
